{% extends "base.html" %}

{% block head_add %}
    <title> {{ keywords }} - 信息检索 </title>
{% endblock %}
{% block styles %}
    {{ bootstrap.load_css() }}
    <style>
        body {
            background-image: url("../static/img/bg.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: white;
            font-family: Arial, sans-serif;
        }
        #logo {
            display: block;
            margin: 0 auto;
            max-width: 300px;
            margin-bottom: 20px;
        }
        .form-control {
            width: 50%;
            margin: 0 auto;
            border-radius: 24px;
            padding: 10px 20px;
            font-size: 16px;
        }
        .btn {
            border-radius: 24px;
        }
    </style>
{% endblock %}
{% block page_content %}

<div class="container">
    <div class="row">
        <div class="col-md-12" style="padding: 1rem;text-align:center;">
            <form action="{{ url_for('front._result_page') }}" method="get">
                <div class="input-group" style="font-size: 14px;">
                    <label style="width:100%">
                        <div style="max-width: 584px; width: 100% ;position: absolute;">
                            <input type="text" class="form-control" name="keywords" style="width: 100% ;position: absolute;border-radius: 24px;" value="{{ keywords }}">
                        </div>
                        <button class="btn btn-outline-secondary" type="submit" style="margin-right: -150px;margin-top: 4px;">搜索</button>
                    </label>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9" style="padding: 1rem; font-family: Google Sans,arial,sans-serif;">
            <div id="result-stats" style="font-size:14px">找到约 {{ len_results }} 条结果
                <nobr> （耗时 {{ cost_time }} 秒）&nbsp;</nobr>&nbsp;<a href="{{ url_for('front._advanced_search', keywords = keywords) }}" style="font-size:14px">高级搜索</a>
            </div>
            <br/>
            {% for result in results %}
                <div style="padding: 0 0 1rem 0">
                    {% if result|length > 2 %}  <!-- 网页结果是一个元组，长度大于2 -->
                        <a href="{{ result[1] }}" style="font-size:18px">{{ result[0] }}</a><br/>
                        {% if result[2]!="" %}
                            <span style="font-size:14px">{{ result[2] }}</span><br/>
                        {% endif %}
                        <a href="{{ result[1] }}" style="font-size:12px;color: #626675;">{{ result[1] }}</a>&nbsp;&nbsp;<a href="{{ url_for('front._snapshot',url=result[1]) }}" style="font-size:12px;color: #626675;">网页快照</a>
                    {% else %}  <!-- 文档结果是一个字典，长度为1 -->
                        <a href="#" style="font-size:18px" onclick="return false;">{{ result.title }}</a><br/>
                        <span style="font-size:14px">{{ result.description }}</span><br/>
                        <!-- 拼接完整的下载链接 -->
                        <a href="https://www.nankai.edu.cn/{{ result.url }}" style="font-size:12px;color: #626675;" target="_blank">下载文档</a>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
            <div class="col-md-3" style="padding: 2rem 0 0 0; font-family: Google Sans,arial,sans-serif;">
                <h6 style="padding-left:1.5rem">联想推荐</h6>
                <ul id="suggestion" style="list-style:none;font-size:14px"></ul>
                <hr/>
                <h6 style="padding-left:1.5rem">历史推荐</h6>
                <ul id="personal_suggestion" style="list-style:none;font-size:14px"></ul>
                <hr/>
                {% if search_history %}
                    <div class="row" style="padding-left:1.5rem">
                        <div class="col-md-12" style="max-width:584px;margin: 0 auto"><h6 style="text-align:left">搜索历史</h6></div>
                        <br/>
                        <div class="row">
                            <div style="max-width:584px;margin: 0 auto;float:left;position: relative;">
                                {% for i in search_history %}
                                    <div style="padding: 5px;float:left;">
                                        <a href="{{ url_for('front._result_page', keywords=i) }}" class="btn btn-outline-secondary"
                                           style="width: 100% ;max-width: 584px;border-radius: 24px;margin: 0 auto">{{ i }}</a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

{% endblock %}

{% block script_add %}
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../static/js/recommend.js"></script>
    <script>
        window.onload = function () {
            query_suggest('{{ keywords }}');
            personal_suggest();
        }
    </script>
{% endblock %}